<script setup lang="ts">

</script>

<template>
  <div id="Sidebar" style="margin-left: 3%">
    <div id="SidebarContent" style="margin-left: 20px">
      <h2 style="margin-top: 5px;margin-left: 40%">分类</h2>
      <a href="categoryForm?categoryId=FISH"><img src="images/fish_icon.gif" /></a><br />
      <span class="separator"></span><span class="category">淡水鱼</span><span class="separator"> / </span><span class="category">咸水鱼</span><span class="separator"> / </span><span class="category">...</span><br />
      <a href="categoryForm?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a><br />
      <span class="separator"></span><span class="category">柯基犬</span><span class="separator"> / </span><span class="category">哈士奇</span><span class="separator"> / </span><span class="category">...</span><br />
      <a href="categoryForm?categoryId=CATS"><img src="images/cats_icon.gif" /></a><br />
      <span class="separator"></span><span class="category">波斯猫</span><span class="separator"> / </span><span class="category">家养猫</span><span class="separator"> / </span><span class="category">...</span><br />
      <a href="categoryForm?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a><br />
      <span class="separator"></span><span class="category">绿鬣蜥</span><span class="separator"> / </span><span class="category">截趾虎</span><span class="separator"> / </span><span class="category">...</span><br />
      <a href="categoryForm?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a><br />
      <span class="separator"></span><span class="category">折衷鹦鹉</span><span class="separator"> / </span><span class="category">蓝帽鹦鹉</span><span class="separator"> / </span><span class="category">...</span><br />
    </div>
  </div>
</template>

<style scoped>
#Sidebar {
  display: inline-block;
  border: 1px solid #fff;
  background-color: #F7F9FA;
  margin-top: 60px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  width: 20%;
}

.separator{
  color: #666;
  padding: 0 8px;
  font: 16px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

.category{
  color: #666;
  cursor: pointer;
  font: 16px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

</style>